<template>
  <div class="app">
    <h1>当前计数为：{{ counter }}</h1>
    <button @click="increment">+</button>
  </div>
</template>
<script>
// import { reactive, toRefs, toRef } from 'vue'
import { reactive, toRef } from 'vue'

export default {
  setup() {
    const state = reactive({
      counter: 100
    })
    // 解构对象中的对个属性
    // const { counter } = toRefs(state)
    // 只解构对象中的某个属性
    const counter = toRef(state, 'counter')

    const increment = () => {
      state.counter++
    }

    return {
      counter,
      increment
    }
  }
}
</script>
<style lang="scss" scoped></style>
